<template>
  <div class="home-content" ref="homeContent">
    <content-page-01 />
    <content-page-02 />
    <div></div>
  </div>
</template>

<script>
import contentPage01 from '../content_page_01/content_page_01.vue'
import contentPage02 from '../content_page_02/content_page_02.vue'

export default {
  components: {
    contentPage01,
    contentPage02
  },
  mounted() {
    this.$refs.homeContent.style.height = window.innerHeight * 2;
  }
}
  
</script>

<style scoped>
  .home-content {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 1080px;
    margin-bottom: 300px;
    background-image: linear-gradient(0deg, #21272A, #283440, #3C4C5A);
    box-shadow: 0px -10px 30px 0px rgba(180, 200, 210, 1),
      inset 0 0 40px rgba(86, 158, 184, 0.25),
      inset 0 0 5px rgba(199, 227, 250, 0.6),
      inset 0 0 20px rgba(117, 142, 163, 0.35);
    animation: move 3s forwards ease;
  }

  @keyframes move {
    50% {
      transform: translateY(-60px);
    }
    100% {
      transform: translateY(0px);
    }
  }
</style>